{% extends 'base/base.html' %}

{% block title %}
    号码管理
{% endblock %}



{% block main %}
    <div class="container mt-3">
        <style>
            /* 号码管理页：将右侧按钮组固定在行尾，并去掉内联 float 影响 */
            .list-group-item > form { margin-left:auto; display:inline-flex; gap:12px; align-items:center; }
            .list-group-item > form .btn { float:none !important; margin-top:0 !important; }
        </style>
    {% if messages %}
        <div id="msg">
            {% for message in messages %}
                <div class="alert alert-{% if message.tags == 'error' %}danger{% else %}{{ message.tags }}{% endif %} alert-dismissible fade in"
                     role="alert">
                    {{ message }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                </div>
            {% endfor %}
        </div>
        <script>
    // 1.5 秒后淡出，可改成任意延时
    setTimeout(() => {
      document.getElementById('msg').style.transition = 'opacity 0.5s';
      document.getElementById('msg').style.opacity = '0';
      // 如果想彻底移除再加一句 remove()
    }, 1500);
  </script>
        {% endif %}
        </div>
    <h1>号码管理</h1>
    <form action="" method="post">
        {% csrf_token %}
        <div class="form-group">
            {{ form }}
            <input type="hidden" name="action" value="add">
            <button style="width: 100%; margin-top: 20px" class="btn btn-default" type="submit">添加号码</button>
        </div>
    </form>

    <ul class="list-group">
            <li class="list-group-item disabled">我的号码</li>
            {% for phone in phones %}
                <li class="list-group-item">{{ phone.phonenumber }}
                    <form action="" method="post" style="display: inline; float: right;margin-top: -7px">
                        {% csrf_token %}
                        {% if not phone.is_primary %}
                            <input type="hidden" name="phone_id" value="{{ phone.id }}">
                            <button class="btn btn-danger" style="float: right" type="submit" name="action"
                                    value="delete">
                                删除
                            </button>
                            <input type="hidden" name="phone_id" value="{{ phone.id }}">
                            <button style="float: right; margin-right: 15px" class="btn btn-success" id="look" type="submit"
                                    name="action" value="set_primary">查询
                            </button>
                        {% else %}
                            <input type="hidden" name="phone_id" value="{{ phone.id }}">
                            <button class="btn btn-danger" style="float: right;margin-top: -7px" type="submit"
                                    name="action"
                                    value="delete">
                                删除
                            </button>
                            <button style="float: right; margin-right: 15px;margin-top: -7px"
                                    class="btn btn-success disabled" id="look" type="button">
                                查询
                            </button>

                        {% endif %}
                    </form>
                </li>
            {% endfor %}
    </ul>
{% endblock %}

{% block js %}

{% endblock %}